<template>
  <el-card class="box-card">
    <el-form label-width="120">
        <el-form-item label="SKU名称">
            <el-input v-model="skuInfo.skuName" placeholder="请输入sku名称"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input v-model="skuInfo.price" placeholder="价格(元)" type="number"></el-input>
        </el-form-item>
        <el-form-item label="质量(g)">
            <el-input v-model="skuInfo.weight" placeholder="质量(g)" type="number"></el-input>
        </el-form-item>
        <el-form-item label="SKU描述">
            <el-input v-model="skuInfo.skuDesc" placeholder="请输入" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form label-width="40" :inline="true">
                <el-form-item v-for="item,index in attrList" :key="index" :label="item.attrName">
                    <el-select v-model="item.attrIdAndValueId" placeholder="请选择">
                        <el-option v-for="ele,i in item.attrValueList" :key="i" :label="ele.valueName" :value="`${item.id}:${ele.id}`"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-form label-width="40" :inline="true">
                <el-form-item v-for="item,index in saleList" :key="index" :label="item.saleAttrName">
                    <el-select v-model="item.saleIdAndValueId" placeholder="请选择">
                        <el-option v-for="ele,i in item.spuSaleAttrValueList" :key="i" :label="ele.saleAttrValueName" :value="`${item.id}:${ele.id}`"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片名称">
            <el-table :data="imgList" ref="tableRef" border style="width:100%;">
                <el-table-column label="" type="selection" width="80"></el-table-column>
                <el-table-column label="图片">
                    <template #="{row,$index}">
                        <img :src="row.imgUrl" alt="图片" style="width:100px;height:100px;">
                    </template>
                </el-table-column>
                <el-table-column prop="imgName" label="名称"></el-table-column>
                <el-table-column label="操作">
                    <template #="{row,$index}">
                        <el-button type="info" size="small" @click="setDefaultImg(row)">设为默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item label="">
            <el-button type="primary" @click="saveBtn">保存</el-button>
            <el-button type="info" @click="cancelBtn">取消</el-button>
        </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ElCard, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElTable, ElTableColumn, ElButton, ElMessage } from "element-plus";
//@ts-ignore,引入请求函数
import { reqProductAttrList, reqSpuImageList, reqSpuHasSaleAttr, reqAddSku } from "@/api/product/index.ts";
//@ts-ignore,引入类型约束
import { skuParams } from "@/api/product/type.ts";
import { defineEmits, reactive, ref } from "vue";
const emit = defineEmits(["changeScene"]);

//平台属性存储
let attrList = ref<any>([]);
//销售属性
let saleList = ref<any>([]);
//照片墙数据
let imgList = ref<any>([]);

//sku请求参数收集
let skuInfo = reactive<skuParams>({
    category3Id:0,
    spuId:0,
    tmId:0,
    skuName:"",
    price:null,
    weight:null,
    skuDesc:"",
    skuAttrValueList:[],
    skuSaleAttrValueList:[],
    skuDefaultImg:""
})

//获取table组件实例
let tableRef = ref<any>();

//table上的设置默认图片按钮
const setDefaultImg = (row:any) => {
    //表格上的复选框选中
    tableRef.value.clearSelection(); 
    tableRef.value.toggleRowSelection(row,true);
    //收集图片地址
    skuInfo.skuDefaultImg = row.imgUrl;
}

//保存与取消按钮
const saveBtn = async () => {
    //进行参数整理
    skuInfo.skuAttrValueList = attrList.value.reduce((prev:any,next:any) => {
        if(next.attrIdAndValueId){
            let [attrId,valueId] = next.attrIdAndValueId.split(":");
            prev.push({attrId,valueId});
        }
        return prev;
    },[]);
    skuInfo.skuSaleAttrValueList = saleList.value.reduce((prev:any,next:any) => {
        if(next.saleIdAndValueId){
           let [saleAttrId,saleAttrValueId] = next.saleIdAndValueId.split(":");
           prev.push({saleAttrId,saleAttrValueId});
        }
        return prev;
    },[]);
    //发请求
    let res:any = await reqAddSku(skuInfo);
    if(res.code == 200){
        ElMessage({type:"success",message:"sku添加成功!"});
        // console.log("添加sku,api成功",res);
    }
    //调用取消按钮
    cancelBtn();
}
const cancelBtn = () => {
    //清空数据
    skuInfo = {
        category3Id:0,
        spuId:0,
        tmId:0,
        skuName:"",
        price:null,
        weight:null,
        skuDesc:"",
        skuAttrValueList:[],
        skuSaleAttrValueList:[],
        skuDefaultImg:""
    }
    //触发自定义事件
    emit('changeScene',0,'noRequest');
}

//子组件对外暴露方法，供父组件调用，用来传递数据
//发请求获取页面初始数据
const initData = async ({category1Id,category2Id,category3Id},spuId:number,spuTmId:number) => {
    //收集参数
    skuInfo.category3Id = category3Id;
    skuInfo.spuId = spuId;
    skuInfo.tmId = spuTmId;

    //初始化发请求
    let res1:any = await reqProductAttrList(category1Id,category2Id,category3Id);
    let res2:any = await reqSpuImageList(spuId);
    let res3:any = await reqSpuHasSaleAttr(spuId);
    // console.log(res1,res2,res3);
    attrList.value = res1.data;
    saleList.value = res3.data;
    imgList.value = res2.data;
}
//对外暴露
defineExpose({
    initData,
})
</script>
<script lang="ts">
export default {
    name:"SkuFrom"
}
</script>

<style>

</style>